<template>
	<view class="warp">
		<view class="logContainer">
			<!-- 头部开始 -->
			<view class="logHeader">
				<view class="userInfo">
					<image src="../static/jzqIcon/user1.png" mode=""></image>
					<text class="userName">小北爱测评</text>
				</view>
				<view class="headerMore">
					<image src="../static/jzqIcon/more.png" mode=""></image>
				</view>
			</view>
			<!-- 头部结束 -->
				<view class="logTag">
					<text class="tagIcon">#</text>
					<text class="tagTitle">学习心得</text>
				</view>
			<!--内容开始  -->
			<view class="logContent">
				<text class="content">测评，是以现代心理学和行为科学为基础，通过心理测验、面试、情景模拟等科学方法对人的价值观、性格特征以及发展潜力等的心理特征进行客观的测量。</text>
				<navigator class="navMore" url="">
					<text>查看全部</text>
				</navigator>
				<view class="contentImgs">
					<image src="../static/jzqImgs/contentImg2.png" mode="widthFix"></image>
					<image src="../static/jzqImgs/contentImg3.png" mode="widthFix"></image>
					<image src="../static/jzqImgs/contentImg4.png" mode="widthFix"></image>
				</view>
			</view>
			<!--内容结束  -->
			<commonFooter v-show="isShowFooter"></commonFooter>
			<view class="contentTime" v-show="isShowTime">
				<text>更新于 2021-05-02</text>
			</view>
		</view>
		<u-gap height="5" bg-color="#bbb"></u-gap>
	</view>
	
</template>
<script>
	import commonFooter from 'components/commonFooter'
	export default {
		props:{
			isShowFooter:{
				type:Boolean,
				default:true
			},
			isShowTime:{
				type:Boolean,
				default:true
			}
			
		},
		components: {
			commonFooter
		},
		name: "commonLogContainer",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.logContainer {
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		.logHeader {
			display: flex;
			margin: 22rpx 0;
			align-items: center;
			justify-content: space-between;

			.userInfo {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.headerMore {
				image {
					width: 64rpx;
					height: 34rpx;
				}
			}
		}
		.logTag {
			margin: 22rpx 0;
			background-color: #EBEBEB;
			height: 52rpx;
			width: 196rpx;
			line-height: 52rpx;
			text-align: center;
			border-radius: 26rpx;
		
			.tagIcon {
				height: 32rpx;
				width: 32rpx;
				padding: 5rpx 10rpx;
				border-radius: 50%;
				color: #FFFFFF;
				background-color: #255584;
			}
		
			text {
				margin-left: 5rpx;
			}
		}

		.logContent {
			position: relative;
			margin: 20rpx 0;

			.content {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				letter-spacing: 5rpx;
				-webkit-box-orient: vertical;
			}

			.navMore {
				position: absolute;
				top: 76rpx;
				right: 0rpx;
			}
		}

		.contentImgs {
			display: flex;
			margin: 20rpx 0;

			image {
				margin-right: 10rpx;
			}
		}
	}
	.contentTime{
		font-size: 20rpx;
		color: #CCCCCC;
	}
</style>
